import { Card, Avatar, Button, List, Tag } from 'antd'
import { useSelector } from 'react-redux'
import { UserInfoType, StoreType, ListItem } from '../../interface'
import { useNavigate } from 'react-router-dom'
import { apigetUserArticle } from '../../api'
import React, { useEffect, useState } from 'react'
import { ListItemTag, ClassifyTow } from '../../Emnu'


const My = () => {

    const navigate = useNavigate();

    const [list, setList] = useState([])

    const userInfo = useSelector((state: StoreType) => {
        return state.userInfo as UserInfoType
    })

    useEffect(() => {
        getList()
    }, [])

    const getList = () => {
        apigetUserArticle().then(res => {
            setList(res.data)
        })
    }

    // 跳转详情
    const toDetail = (item: ListItem) => {
        navigate(`/detail/${item.id}`)
    }

    const editInfo = () => {
        navigate('/myInfo')
    }

    return <div className="public">
        {/* 信息卡片 */}
        <Card >
            <div className="my-info-carb">
                <div>
                    <Avatar size="large" src={userInfo.img}></Avatar>
                </div>
                <div>
                    <h3>{userInfo.name}</h3>
                    <div >
                        <span className="info-carb">{userInfo.pv}被访问</span>
                        <span className="info-carb">{userInfo.num}原创</span>
                        <span className="info-carb">{userInfo.fans}粉丝</span>

                    </div>
                </div>
            </div>
            <Button type="primary" onClick={editInfo}>编辑资料</Button>
        </Card>
        <Card title="文章">
            <List
                dataSource={list}
                renderItem={(item: ListItem) => (
                    <List.Item
                        key={item.title}
                        onClick={() => toDetail(item)}
                    >
                        <div>
                            <h3>{item.title}</h3>
                            <div className="list-item">
                                <img className="list-item-img" src={item.img} />
                                <div>
                                    <p>{item.info}</p>
                                    <Tag color="blue">{ListItemTag[item.classify]}</Tag>
                                    <Tag color="red">{ClassifyTow[item.classifytow]}</Tag>
                                    <div>作者：{item.username}</div>
                                </div>
                            </div>
                        </div>
                    </List.Item>
                )}
            />
        </Card>
    </div>
}

export default My